<template>
    <div class="login-wrapper" ref="login">
      <div class="main-wrapper">
        <div class="back-wrapper clearfix">
          <p class="fl" @click="$router.go(-1)">返回</p>
        </div>
        <div class="login-title tc">手机账号登录</div>
        <div class="login-box">
          <div class="input-phone-wrapper">
            <div class="icon-wrapper phone-icon-wrapper inline"></div>
            <div class="phone-wrapper inline border-1px-bottom">
              <input type="tel" class="phone inline" placeholder="请输入手机号码" maxlength="11" v-model="phoneNum">
            </div>
          </div>
          <div class="input-code-wrapper">
            <div class="icon-wrapper code-icon-wrapper inline"></div>
            <input type="tel" class="code inline" placeholder="请输入短信验证码" v-model="code">
            <div class="code-wrapper inline border-1px-left">
              <div class="get-code tc" v-show="!showTime" @click="getCode">获取验证码</div>
              <div class="wait-time tc" v-show="showTime"><span v-show="showZero">0</span>{{num}}s</div>
            </div>
          </div>
        </div>
        <p class="login-btn tc" @click="getLogin">登录</p>
      </div>
    </div>
</template>

<script>
    import AsyncJson from '@/common/js/async'
    import Toast from '@/common/js/toast'

    export default {
        name: "Login",
        data() {
            return {
              showTime:false,
              showZero:false,
              num:60,
              phoneNum:"",
              code:"",
              to:"",
            }
        },
        methods: {
          setHeight(){
            this.$refs.login.style.height = document.documentElement.clientHeight + "px";
          },
          getCode(){
            let reg = /^1[34578]\d{9}$/;
            if(!reg.test(this.phoneNum)){
              Toast("手机号格式不正确");
              return;
            }
            AsyncJson("POST","user/phoneauthcode",{mobile_phone:this.phoneNum}).then((res) => {
              Toast(res.data);
              if(res.status === "000"){
                Toast(res.data);
                this.showTime = !this.showTime;
                this.countDown();
              }
            }).catch((err) => {
              console.log(err);
            });
          },
          getLogin(){
            if(!this.phoneNum){
              Toast("请输入手机号");
              return;
            }
            if(!this.code){
              Toast("请输入验证码");
              return;
            }
            AsyncJson("POST","user/phonelogin",{mobile_phone:this.phoneNum,captcha:this.code}).then((res) => {
              if(res.status === "000"){
                // 保存登录状态和userId
                try {
                  sessionStorage.setItem("loginFlag","yes");
                  sessionStorage.setItem("userId",res.data.userid);
                } catch (e) {
                  Toast("您处于无痕浏览，无法为您跳转");
                }
                if(!this.to){
                  this.$router.go(-1);
                }else{
                  this.$router.push({path:this.to});
                }
              }else{
                Toast(res.data);
              }
            }).catch((err) => {
              console.log(err);
            });
          },
          countDown(){
            let timer = setInterval(() => {
              this.num --;
              if(this.num < 10){
                this.showZero = true;
              }
              if(this.num === 0){
                this.showZero = false;
                clearInterval(timer);
                this.num = 15;
                this.showTime = !this.showTime;
              }
            },1000);
          }
        },
        mounted(){
          this.to = this.$route.params['to'];
          this.setHeight();
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylu/index.styl"

  .login-wrapper
    background url("./login-bg.png") no-repeat center center
    background-size cover
    .main-wrapper
      padding-top 68px
      .back-wrapper
        padding-left 27px
        p
          padding-left 36px
          color #d7bc93
          font-size 32px
          height 36px
          line-height 36px
          background url("./back.png") no-repeat center left
          background-size 26px 36px
      .login-title
        font-size 36px
        margin 70px 0 60px 0
      .login-box
        padding-left 28px
        background #ffffff
        input
          outline none
          background none
          border none
          &::-webkit-input-placeholder
            color #b3b2b2
        .icon-wrapper
          width 58px
          height 118px
          background url("./phone.png") no-repeat center left
          background-size 28px 44px
          &.code-icon-wrapper
            background url("./code.png") no-repeat center left
            background-size 33px 27px
        .input-phone-wrapper
          font-size 0
          .phone-wrapper
            padding-left 58px
            width 606px
            height 118px
            border-1px-bottom(#e5e5e5)
            .phone
              font-size 32px
              height 40px
              line-height 40px
              margin-top 42px
        .input-code-wrapper
          font-size 0
          .code
            width 356px
            margin-left 58px
            font-size 32px
            height 40px
            line-height 40px
            margin-top 42px
          .code-wrapper
            height 80px
            width 248px
            margin-top 19px
            border-1px-left(#e5e5e5)
            font-size 32px
            color #da001d
            .get-code
              height 80px
              line-height 80px
            .wait-time
              color #b3b2b2
              height 80px
              line-height 80px
      .login-btn
        width: 690px
        height: 90px
        line-height 90px
        margin 80px auto 0
        color #ffffff
        font-size 32px
        background-color: #d7bc93
</style>
